<!-- 全部订单页面1。该页面属于正常的Vue页面，正常书写代码结构，但对于订单列表这种页面来说页面性能不太好， -->
<template>
  <view v-if="shenheStatus != 1 || !shenheAliStatus" class="page">
    <!--  #ifdef  H5 -->
    <view v-if="isofficial() && template_id">
      <WxOpenSubscribe :template="template_id"></WxOpenSubscribe>
    </view>
    <!--  #endif  -->
    <view class="order-box" v-if="order">
      <!-- <view class="order-model" v-if="order.express_no">
        <view>
          <view class="">快递公司：{{ order.express }}</view>
          <view class="">快递单号：{{ order.express_no }}</view>
        </view>
      </view> -->

      <!-- 订单头部信息（订单状态） -->
      <orderHeader
        :order="order"
        @handleOrderTopBtn="handleOrderTopBtn"
      ></orderHeader>

      <view class="page-container">
        <template v-if="order.delivery_keloop">
          <view class="delivery">
            <view class="con">
              <view class="title"
                >配送员{{ order.delivery_keloop.delivery_status_name }}</view
              >
              <view class="des">
                <view class="name">{{ order.delivery_keloop.rider_name }}</view>
              </view>
            </view>
            <view
              class="rig"
              @click.stop="makePhone(order.delivery_keloop.rider_mobile)"
            >
              <i class="iconfont icon-telephone-out1"></i>
              <view>电话</view>
            </view>
          </view>
        </template>

        <template v-else>
          <template v-if="order.delivery_info">
            <view
              class="delivery"
              @click="
                $utils.toUrl(
                  `/distribution/info/index?id=${order.delivery_info.rider.id}`
                )
              "
            >
              <view class="let">
                <image
                  :src="order.delivery_info.rider.avatar"
                  mode="aspectFill"
                ></image>
              </view>
              <view class="con">
                <view class="title"
                  >配送员{{ order.delivery_info.order_status }}</view
                >
                <view class="des">
                  <view class="name">{{
                    order.delivery_info.rider.real_name
                  }}</view>
                  <view class="line"></view>
                  <i class="iconfont icon-collection-fill"></i>
                  <view class="star">{{ order.delivery_info.rider.star }}</view>
                  <i class="iconfont icon-arrow-right"></i>
                </view>

                <view
                  class="evaluate"
                  @click.stop="openEvaluate"
                  v-if="order.delivery_info.is_can_comment"
                >
                  <u-rate
                    inactive-icon="star-fill"
                    size="48"
                    :count="5"
                    disabled
                    v-model="order.delivery_info.order_star"
                    inactive-color="#EFEFEF"
                    active-color="#F0250E"
                  ></u-rate>
                  <view class="tag">点击评价</view>
                </view>
              </view>
              <view
                class="rig"
                @click.stop="makePhone(order.delivery_info.rider.mobile)"
              >
                <i class="iconfont icon-telephone-out1"></i>
                <view>电话</view>
              </view>
            </view>

            <evaluate
              ref="evaluate"
              :orderNo="order.order_no"
              :list="order.delivery_info.comment_tags"
              @callback="getOrderInfo"
            ></evaluate>
          </template>
        </template>

        <!-- 赠送卡券 -->
        <cardVoucher
          @callBack="getOrderInfo"
          :order="order"
          :status="order.trade_status"
        ></cardVoucher>

        <!-- 门店信息 && 点餐的订单-->
        <mdInfoSection
          v-if="
            order.md_info.name &&
            (order.order_type == 3 || order.is_offline == 1)
          "
          :order="order"
        ></mdInfoSection>
        <!-- 用户信息及地址 -->

        <template
          v-if="
            ([1, 2].includes(order.order_type) || order.is_offline === 1) &&
            order.trade_status !== 1 &&
            order.trade_status !== -1
          "
        >
          <view class="m-box">
            <view
              class="box-ewm"
              :class="[
                'box-ewm',
                [0, 2].includes(order.trade_status) ? '' : 'disabled'
              ]"
            >
              <view class="title">核销码</view>

              <view class="ewm">
                <image :src="qrCode" mode="aspectFill"></image>

                <view class="num" v-if="order.order_type === 1"
                  >{{ order.goods_list[0].num }}间房间</view
                >
                <view class="num" v-else></view>

                <view class="code">
                  <view class="codeBox">
                    订单编号：<text>{{ order.order_no }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <view
            class="m-box"
            v-if="order.book_man_info && order.book_man_info.length"
          >
            <view class="addresList">
              <view class="title">入住信息</view>

              <view
                class="m-form"
                v-for="(item, i) of order.book_man_info"
                :key="i"
              >
                <view class="item">
                  <view class="let">入住人：</view>
                  <view class="rig">{{ item.name }}</view>
                </view>
                <view class="item">
                  <view class="let">身份证号：</view>
                  <view class="rig">{{ item.idCard }}</view>
                </view>
                <view class="item">
                  <view class="let">联系手机：</view>
                  <view class="rig">{{ item.mobile }}</view>
                </view>
              </view>
            </view>
          </view>
        </template>
        <UserLocal
          :order="order"
          v-if="![1, 2, 4].includes(order.order_type) && order.tencent_map_key"
        ></UserLocal>

        <userInfo
          v-if="order.order_type == 0 && order.is_offline != 1"
          :order="order"
        ></userInfo>

        <!-- 物流信息 -->
        <expressLabel
          v-if="
            order.order_type == 0 &&
            order.is_delivery == 0 &&
            order.is_offline == 0
          "
          :order="order"
        ></expressLabel>

        <!-- 店铺及商品信息 -->
        <goodsDetail
          :orderitem="order"
          @buyAgain="buyAgain"
          @orderRefund="orderRefundOne"
          @commentGoods="commentGoods"
        ></goodsDetail>

        <!-- 订单明细及金额明细 -->
        <orderSummary :orderitem="order"></orderSummary>

        <template v-if="order.pay_type == 11">
          <view class="m-box offLine">
            <template v-if="order.payOffLine">
              <view class="payTitlt">线下转账</view>
              <view class="flex">
                <view class="flexlet">状态：</view>
                <view class="flexrig">
                  {{ getOffLineStatus(order.payOffLine.status) }}
                </view>
              </view>
              <view class="flex" v-if="order.payOffLine.status == '2'">
                <view class="flexlet">拒绝原因：</view>
                <view class="flexrig">
                  {{ order.payOffLine.admin_remark }}
                </view>
              </view>
              <view class="flex">
                <view class="flexlet">转账类型：</view>
                <view class="flexrig">
                  {{ getType(order.payOffLine.type) }}
                </view>
              </view>
              <view class="flex">
                <view class="flexlet">转账备注：</view>
                <view class="flexrig">
                  {{ order.payOffLine.desc }}
                </view>
              </view>
              <view class="flex">
                <view class="flexlet">转账截图：</view>
                <view class="flexrig">
                  <toolsFile
                    v-if="order.payOffLine.pic_list"
                    :disabled="true"
                    :fileList="getImages(order.payOffLine.pic_list)"
                  ></toolsFile>
                  <view v-else>-</view>
                </view>
              </view>
              <view class="flex">
                <view class="flexlet">操作时间：</view>
                <view class="flexrig">
                  {{ order.payOffLine.add_at }}
                </view>
              </view>
            </template>
            <view v-else>暂未提交</view>
          </view>
        </template>

        <!-- 底部操作按钮组 -->
        <footBtns
          :order="order"
          @handleCancleBtn="handleCancleBtn"
          @handleConfirmBtn="handleConfirmBtn"
          @handleDeleteBtn="handleDeleteBtn"
          :showRefund="showRefund"
        >
        </footBtns>

        <!-- 支付组件弹框 -->
        <payOrder
          ref="payOrderRef"
          :order_id="payOrderID"
          :order="order"
          @paySuccess="paySuccessCb"
        ></payOrder>
      </view>
    </view>
    <u-action-sheet
      :list="cancel_list"
      :tips="{ text: $t('mdAdmin.reason') }"
      :safe-area-inset-bottom="true"
      @click="onCancel"
      v-model="is_show_calcel"
    ></u-action-sheet>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import userInfo from "../components/order-detail/user-info.vue";
import goodsDetail from "../components/order-detail/goods-detail.vue";
import orderSummary from "../components/order-detail/order-summary.vue";
import footBtns from "../components/order-detail/foot-btns.vue";
import orderHeader from "../components/order-detail/order-header.vue";
import expressLabel from "../components/order-detail/express-label.vue";
import payOrder from "../components/pay-order/pay-popup.vue";
import mdInfoSection from "../components/order-detail/md-info.vue";
import cardVoucher from "../components/order-detail/cardVoucher";
import UserLocal from "../components/order-detail/map.vue";
import WxOpenSubscribe from "../components/wx-open-subscribe";
import toolsFile from "@/components/tools/tools-file";
import evaluate from "../components/evaluate.vue";
export default {
  components: {
    userInfo,
    goodsDetail,
    orderSummary,
    footBtns,
    orderHeader,
    payOrder,
    expressLabel,
    mdInfoSection,
    cardVoucher,
    Shenhe,
    WxOpenSubscribe,
    toolsFile,
    UserLocal,
    evaluate
  },
  data() {
    return {
      order_id: 0,
      order: null,
      payOrderID: "",
      template_id: [],
      is_show_calcel: false,
      // 是否显示售后按钮
      showRefund: false,
      longitude: "",
      latitude: "",

      qrCode: "",
      rate: ""
    };
  },
  onLoad(t) {
    if (t?.scene) {
      let scene = decodeURIComponent(t.scene);
      let params = this.$utils.sceneDecode(scene);
      if (params.id) {
        this.order_id = params.id;
      }
    } else {
      this.order_id = t.id;
    }
  },
  async onShow() {
    const res = await this.$store.dispatch("getLocation");
    if (res) {
      let { longitude, latitude } = res;
      this.longitude = longitude;
      this.latitude = latitude;
    }

    this.getOrderInfo();
  },
  computed: {
    getType() {
      return (type) => {
        let str = "";
        switch (String(type)) {
          case "1":
            str = "微信转账";
            break;

          case "2":
            str = "支付宝转账";
            break;

          case "3":
            str = "银行卡转账";
            break;

          default:
            break;
        }
        return str;
      };
    },

    getImages() {
      return (list) => {
        return JSON.parse(list).map((el) => {
          return { url: el };
        });
      };
    },

    getOffLineStatus() {
      return (status) => {
        let str = "";
        switch (String(status)) {
          case "0":
            str = "待审核";
            break;

          case "1":
            str = "已通过";
            break;

          case "2":
            str = "已拒绝";
            break;
        }

        return str;
      };
    },

    cancel_list() {
      return [
        {
          text: this.$t("mdAdmin.reason1"),
          color: "#333333",
          fontSize: 24
        },
        {
          text: this.$t("mdAdmin.reason2"),
          color: "#333333",
          fontSize: 24
        },
        {
          text: this.$t("mdAdmin.reason3"),
          color: "#333333",
          fontSize: 24
        },
        {
          text: this.$t("mdAdmin.reason4"),
          color: "#333333",
          fontSize: 24
        },
        {
          text: this.$t("mdAdmin.reason5"),
          color: "#333333",
          fontSize: 24
        }
      ];
    }
  },
  watch: {},
  methods: {
    isofficial: function () {
      // #ifdef H5
      if (this.$utils.isWechat()) {
        return true;
      }
      // #endif
      return false;
    },
    onCancel: function (e) {
      this.$allrequest.order
        .preCancelOrder(
          {
            order_id: this.order_id,
            reason_id: e + 1
          },
          true
        )
        .then((res) => {
          if (res.data.resultcode == 0) {
            let msg = this.$t("order.cancle");
            if (res.data.deduct_fee && res.data.deduct_fee > 0) {
              msg +=
                this.$t("mdAdmin.dedit") +
                res.data.deduct_fee +
                this.$t("mdAdmin.canWith1");
            }
            uni.showModal({
              title: this.$t("order.prompt"),
              content: msg,
              success: (ress) => {
                if (ress.confirm) {
                  this.$allrequest.order
                    .cancelOrder(
                      {
                        order_id: this.order_id,
                        reason_id: e + 1
                      },
                      true
                    )
                    .then((r) => {
                      if (r.data.resultcode == 0) {
                        this.orderRevoke(this.order_id, false);
                      } else {
                        uni.showToast({
                          title: this.$t("mdAdmin.cancleErr"),
                          duration: 2000
                        });
                      }
                    });
                }
              }
            });
          } else {
            uni.showToast({
              title: this.$t("mdAdmin.cantCancle"),
              duration: 2000
            });
          }
        });
    },
    // 这里调用接口获取一次支付组件需要的支付类型参数及templateID
    getOrderInfo() {
      var that = this;
      this.$allrequest.order
        .detail({
          order_id: that.order_id,
          longitude: that.longitude,
          latitude: that.latitude
        })
        .then((res) => {
          uni.stopPullDownRefresh();

          if (res.code == 0) {
            this.template_id = res.template_id;
            this.order = res.data;
            let goods = this.order.goods_list || [];
            let showRefund = goods.some((item) => {
              return item.is_order_refund == 0 && item.order_refund_enable == 1;
            });
            this.showRefund = showRefund;
            if (
              [1, 2].includes(res.data.order_type) ||
              res.data.is_offline === 1
            ) {
              this.$allrequest.order
                .getQrcode({
                  order_no: res.data.order_no
                })
                .then((e) => {
                  if (!e.code) {
                    this.qrCode = e.data.url;
                  }
                });
            }
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000
            });
            setTimeout(function () {
              uni.navigateBack({
                delta: 1
              });
            }, 1500);
          }
        });
    },

    // 定位
    location() {
      uni.openLocation({
        latitude: parseFloat(this.order.shop.latitude),
        longitude: parseFloat(this.order.shop.longitude),
        name: this.order.shop.address
      });
    },

    // 点击订单顶部按钮回调
    handleOrderTopBtn(e) {
      // 当状态为未支付时，去支付
      if (e.status == -1) {
        this.gotoPay(e);
      }
    },
    // 确认收货
    confirm(order_id) {
      var that = this;
      uni.showModal({
        title: this.$t("order.prompt"),
        content: this.$t("order.goods"),
        success: function (res) {
          if (res.confirm) {
            that.$allrequest.order
              .confirm({
                order_id: order_id
              })
              .then((res) => {
                if (res.code == 0) {
                  try {
                    uni.setStorageSync("needReload", "true");
                  } catch (e) {
                    // error
                  }
                  uni.showToast({
                    title: res.msg,
                    icon: "none",
                    duration: 2000
                  });
                  setTimeout(() => {
                    that.$utils.toUrl("/order/order/order");
                  }, 1500);
                } else {
                  uni.showToast({
                    title: res.msg,
                    icon: "none",
                    duration: 2000
                  });
                  return false;
                }
              });
          } else if (res.cancel) {
          }
        }
      });
    },
    // 点击订单底部按钮回调
    handleConfirmBtn(e) {
      if (e.status == -1) {
        this.gotoPay(e);
      }
      if (e.status == 2) {
        this.confirm(e.id);
      }
      if (e.status == 3) {
        let list = this.order.goods_list;
        list.forEach((item) => {
          item.attr_list = item.attr;
        });
        this.buyOrderAgain(list || []);
      }
    },
    handleCancleBtn(e) {
      let { order } = this;
      if (e.is_delivery == 1 && e.status !== -1) {
        if (order.delivery_keloop) {
          if (order.delivery_keloop.is_cancel != "1") {
            // 同城配送订单
            this.is_show_calcel = true;
            return;
          }
        } else {
          this.is_show_calcel = true;
          return;
        }
      }
      // 订单状态，-1:默认，0:待发货，1:已取消，2:已发货，3:已确认
      // 当订单状态为未支付、待发货、已发货时，可取消订单
      if (["-1", "0", "2"].includes(String(e.status))) {
        //   取消订单
        this.orderRevoke(e.id, true);
      }
      if (e.status == 3) {
        // 整个订单一起售后
        let arr = [];
        let list = this.order.goods_list;
        list.forEach((item) => {
          if (item.order_refund_enable == 1 && item.is_order_refund == 0) {
            arr.push(item);
          }
        });
        if (arr.length) {
          this.orderRefund(arr);
        } else {
          uni.showToast({
            title: this.$t("mdAdmin.noSales"),
            icon: "none"
          });
        }
      }
    },
    // 点击底部删除按钮
    handleDeleteBtn(e) {
      this.deleteOrder(e.id);
    },
    // 展示支付弹框
    gotoPay(e) {
      let { pay_type, payOffLine } = this.order;
      if (pay_type == 11 && !payOffLine.status)
        return this.$u.toast("当前凭证正在审核，请勿重新提交");

      // 去支付
      this.payOrderID = e.id;
      // 展示支付弹框
      this.$refs.payOrderRef.setShowPopup();
    },
    // 支付成功回调
    paySuccessCb() {
      try {
        // 利用本地缓存，当返回订单列表页时，进行页面刷新
        uni.setStorageSync("needReload", "true");
      } catch (e) {
        // error
      }
      uni.navigateBack();
    },
    // 取消订单
    orderRevoke(order_id, isShowModal) {
      var that = this;
      // #ifdef MP-WEIXIN
      uni.requestSubscribeMessage({
        tmplIds: this.template_id,
        complete() {
          that.orderRevokeSubmit(order_id, isShowModal);
        }
      });
      // #endif
      // #ifndef MP-WEIXIN
      that.orderRevokeSubmit(order_id, isShowModal);
      // #endif
    },
    orderRevokeSubmit(order_id, isShowModal) {
      var that = this;
      if (isShowModal) {
        uni.showModal({
          title: this.$t("order.prompt"),
          content: this.$t("order.cancle"),
          success: function (res) {
            if (res.confirm) {
              that.$allrequest.order
                .revoke({
                  order_id: order_id
                })
                .then((res) => {
                  if (res.code == 0) {
                    try {
                      uni.setStorageSync("needReload", "true");
                    } catch (e) {
                      // error
                    }
                    uni.showToast({
                      title: res.msg,
                      icon: "none",
                      duration: 2000
                    });
                    setTimeout(() => {
                      that.$utils.toUrl("/order/order/order?status=1");
                    }, 1500);
                  } else {
                    uni.showToast({
                      title: res.msg,
                      icon: "none",
                      duration: 2000
                    });
                    return false;
                  }
                });
            } else if (res.cancel) {
            }
          }
        });
      } else {
        that.$allrequest.order
          .revoke({
            order_id: order_id
          })
          .then((res) => {
            if (res.code == 0) {
              try {
                uni.setStorageSync("needReload", "true");
              } catch (e) {
                // error
              }
              uni.navigateBack();
            } else {
              uni.showToast({
                title: res.msg,
                icon: "none",
                duration: 2000
              });
              return false;
            }
          });
      }
    },
    // 再次购买。先加购物车
    buyAgain(e) {
      // 单个加购物车
      if (e.type === "one") {
        let params = {
          goods_id: e.item.goods_id,
          num: e.item.num,
          attr: JSON.stringify(e.item.attr)
        };
        this.requestAddOneToCart(params);
      }
    },
    // 订单批量再次购买
    buyOrderAgain(list) {
      this.$allrequest.order
        .buyAgain({ goods_list: JSON.stringify(list) }, true)
        .then((res) => {
          if (res.code == 0) {
            this.$utils.toUrl("/pages/shoppingcart/shoppingcart", "switchtab");
          }
        });
    },
    // api添加单个商品到购物车
    requestAddOneToCart(params) {
      uni.showLoading({
        title: this.$t("home.loading")
      });
      this.$allrequest.goods.addCart(params).then((res) => {
        uni.hideLoading();
        uni.showToast({
          title: res.msg,
          icon: "none"
        });
        if (res.code == 0) {
          this.$utils.toUrl("/pages/shoppingcart/shoppingcart", "switchtab");
        }
      });
    },
    // 点击当个商品售后
    orderRefundOne(e) {
      if (e.order_refund_enable == 1 && e.is_order_refund == 0) {
        this.orderRefund([e]);
      }
    },
    orderRefund(list) {
      uni.setStorageSync("refund-goods", list);

      uni.navigateTo({
        url: "/order/order-refund/order-refund?id=" + this.order_id
      });
    },
    // 删除订单
    deleteOrder(order_id) {
      let that = this;
      uni.showModal({
        title: this.$t("order.prompt"),
        content: this.$t("mdAdmin.confirmCancle"),
        success: function (res) {
          if (res.confirm) {
            that.$allrequest.order
              .delete({
                order_id: order_id
              })
              .then((res) => {
                if (res.code == 0) {
                  uni.navigateBack({
                    delta: 1
                  });
                } else {
                  uni.showToast({
                    title: res.msg,
                    icon: "none",
                    duration: 2000
                  });
                  return false;
                }
              });
          } else if (res.cancel) {
          }
        }
      });
    },
    // 点击评论商品
    commentGoods(e) {
      if (e.is_comment == 1) {
        uni.navigateTo({
          url:
            "/order/order-comment/order-comment?id=" +
            this.order_id +
            "&goods_info=" +
            JSON.stringify(e)
        });
      }
    },

    makePhone(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber
      });
    },

    openEvaluate() {
      let el = this.$refs.evaluate;
      el.star = undefined;
      el.tagId = [];
      el.show = true;
    }
  },

  onPullDownRefresh() {
    this.getOrderInfo();
  }
};
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f2f2f2;
}

.page-container {
  margin-top: -134rpx;
  position: relative;
  padding: 0 24rpx;
  z-index: 10;
  top: 0rpx;
}

.order-box {
  background-color: #f2f2f2;
  padding-bottom: 200rpx;
}

.flex-grow-1 {
  display: flex;
}

.flex-between {
  justify-content: space-between;
}

view {
  font-size: 32rpx;
}

.order-status {
  padding: 20rpx;
  line-height: 80rpx;
  font-size: 36rpx;
  background: #f29100;
  color: #ffffff;
}

.order-model {
  background: #ffffff;
  padding: 20rpx;
  margin-bottom: 16rpx;
}

.order-address > view {
  background: #ffffff;
  padding: 10rpx 0;
}

.order-offline {
  display: flex;
  justify-content: space-between;
  align-items: center;

  > view > view {
    padding: 8rpx;
  }
}

.order-info > view {
  padding: 8rpx;
}

.order-price > view {
  padding: 6rpx;
}

.goods-item {
  display: flex;

  .goods-img {
    width: 200rpx;
    height: 200rpx;
    overflow: hidden;

    > image {
      width: 200rpx;
      height: 200rpx;
    }
  }

  .goods-info {
    width: 550rpx;
    padding-left: 16rpx;
    box-sizing: border-box;
  }
}

.refund-btn {
  float: right;
  height: 60rpx;
  border: 1rpx solid #bbb;
  padding: 0 30rpx;
  border-radius: 10rpx;
  margin-top: 20rpx;
  line-height: 60rpx;
}

.refund-text {
  float: right;
  display: inline-block;
  margin-top: 20rpx;
}

//
.m-box {
  margin-bottom: 24rpx;
  padding: 0 24rpx;
  background: #fff;
  border-radius: 20rpx;

  .title {
    padding: 30rpx 0 0;
    font-size: 28rpx;
    color: #262626;
    font-weight: bold;
  }
}

.box-ewm {
  color: #262626;

  &.disabled {
    .ewm image {
      opacity: 0.2;
    }

    .code {
      .codeBox {
        color: #b6b6b6;

        text {
          position: relative;

          &:after {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            height: 2rpx;
            background: #b6b6b6;
          }
        }
      }
    }
  }

  .ewm {
    padding: 30rpx 0;

    image {
      display: block;
      margin: 0 auto;
      width: 320rpx;
      height: 320rpx;
    }

    .num {
      padding: 14rpx 0 10rpx;
      text-align: center;
      font-size: 22rpx;
    }

    .code {
      text-align: center;

      .codeBox {
        display: inline-block;
        padding: 0 30rpx;
        min-width: 396rpx;
        height: 74rpx;
        line-height: 74rpx;
        border: 2rpx solid #f2f2f2;
        border-radius: 10rpx;
        font-size: 24rpx;
        overflow: hidden;

        text {
          font-weight: bold;
        }
      }
    }
  }
}

.m-form {
  padding: 15rpx 0;
  border-bottom: 1px solid #f8f8f8;

  .item {
    display: flex;
    align-items: center;
    padding: 10rpx 0;
    color: #262626;
  }

  .let {
    width: 200rpx;
    font-size: 26rpx;
  }

  .rig {
    flex: 1;
    overflow: hidden;
    font-weight: bold;
    font-size: 26rpx;
  }

  &:last-of-type {
    border-bottom: 0;
  }
}

::v-deep {
  .order-summary {
    margin-bottom: 24rpx !important;
  }
}

.payTitlt {
  padding: 20rpx 0;
  font-size: 32rpx;
  font-weight: bold;
}

.offLine {
  .flex {
    display: flex;
    padding: 10rpx 0;

    .flexlet,
    .flexrig {
      font-size: 28rpx !important;
    }

    .flexrig {
      flex: 1;
      overflow: hidden;
      margin-left: 10rpx;
    }
  }
}

.delivery {
  display: flex;
  margin-bottom: 24rpx;
  padding: 30rpx 24rpx;
  background: #fff;
  border-radius: 20rpx;

  .let {
    image {
      width: 72rpx;
      height: 72rpx;
      border-radius: 32px;
      overflow: hidden;
    }
  }

  .con {
    flex: 1;
    overflow: hidden;
    padding: 0 20rpx;
  }

  .title {
    padding-bottom: 5rpx;
    font-size: 28rpx;
    font-weight: bold;
  }

  .rig {
    text-align: center;
    color: #8c8c8c;

    .icon-telephone-out1 {
      font-size: 36rpx;
    }

    view {
      font-size: 20rpx;
    }
  }

  .des {
    display: flex;
    align-items: center;
    color: #8c8c8c;
    font-size: 24rpx;

    .icon-collection-fill {
      margin: 0 8rpx 0 10rpx;
    }

    .line {
      margin-left: 10rpx;
      width: 2rpx;
      height: 20rpx;
      background: #f8f8f8;
    }

    .icon-arrow-right {
      color: #8c8c8c;
      font-size: 22rpx;
    }
  }

  .evaluate {
    display: flex;
    align-items: center;
    padding-top: 24rpx;

    .tag {
      margin-left: 26rpx;
      position: relative;
      padding: 2rpx 4rpx;
      background: #fdf1f0;
      border-radius: 6rpx;
      font-size: 24rpx;
      color: #f0250e;

      &:before {
        content: "";
        position: absolute;
        right: 100%;
        top: 50%;
        margin-top: -12rpx;
        border-top: 12rpx solid transparent;
        border-right: 14rpx solid #fdf1f0;
        border-bottom: 12rpx solid transparent;
      }
    }
  }
}
</style>
